<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/views/global/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath %>">
<%@include file="/views/global/ShopInclude.jsp" %>
<link rel="stylesheet" type="text/css" href="static/css/page/index.css" />
<link type="text/css" rel="stylesheet" href="static/css/page/owl.carousel.css">
<link type="text/css" rel="stylesheet" href="static/css/page/owl.theme.css">
<link rel="stylesheet" type="text/css" href="static/css/page/projects.css" >
<title>Projects</title>
</head>
<body>
<%@include file="/views/global/SearchBar.jsp" %>

<!-- 轮播banner  -->
<div class="projectBanner">
  <div class="projectVisual">
	<div class="flickingCon">
	    <c:forEach var="item" items="${projectHeadList}" varStatus="status">
		     <a href="#">${status.index+1 }</a> 
		</c:forEach>
	</div>
	<div class="mainImage">
		<ul>
		    <c:forEach var="item" items="${projectHeadList}" >
		     <li><span style="background:url(${fileServerBasePath }download/${item.fileId}) center top no-repeat;"></span></li> 
		   </c:forEach>
			
		</ul>
		<a href="javascript:;" class="btnPrev"></a>
		<a href="javascript:;" class="btnNext"></a>
	</div>
  </div>
</div>
<%@include file="/views/global/AdminScripts.jsp" %>
<script type="text/javascript" src="static/javascript/jquery.touchSlider.js"></script>
<script type="text/javascript" src="static/javascript/jquery.SuperSlide2.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	$(".mainVisual").hover(function(){
		$(".btnPrev,.btnNext").fadeIn()
	},function(){
		$(".btnPrev,.btnNext").fadeOut()
	});
	
	$dragBln = false;
	
	$(".mainImage").touchSlider({
		flexible : true,
		speed : 400,
		btn_prev : $(".btnPrev"),
		btn_next : $(".btnNext"),
		paging : $(".flickingCon a"),
		counter : function (e){
			$(".flickingCon a").removeClass("on").eq(e.current-1).addClass("on");
		}
	});
	
	$(".mainImage").bind("mousedown", function() {
		$dragBln = false;
	});
	
	$(".mainImage").bind("dragstart", function() {
		$dragBln = true;
	});
	
	$(".mainImage a").click(function(){
		if($dragBln) {
			return false;
		}
	});
	
	timer = setInterval(function(){
		$(".btnNext").click();
	}, 5000);
	
	$(".mainVisual").hover(function(){
		clearInterval(timer);
	},function(){
		timer = setInterval(function(){
			$(".btnNext").click();
		},5000);
	});
	
	$(".mainImage").bind("touchstart",function(){
		clearInterval(timer);
	}).bind("touchend", function(){
		timer = setInterval(function(){
			$(".btnNext").click();
		}, 5000);
	});
	
});
</script>
<!-- 轮播banner 结束  -->


<!-- DESIGNER START -->
<div class="projectDesigner contentWidth center font">
  <hr class="hr left" />
  <div class="fontColorGray projectAreaTitle left">DESIGNER</div>
  <hr class="hr right" />
  <div class="fontColorGray projectAreaSubTitle">BEST DESIGNERS AROUND THE WORLD</div>
  <div id="designerFirstList">
      ${designerFirstListWindow}
  </div>
</div>
<!-- DESIGNER END  -->


<!-- PROJECTS BANNER SCROLL  -->
<div class="projectPosterScroll contentWidth center font fontColorGray">
		<img class="projectPosterArrowLeft prev left" src="static/images/page/projects/projectPosterArrowLeft.png"/>
		<div class="projectPosters contentWidth">
			<ul id="projectFirstList">
			    ${projectFirstListWindow}
			</ul>
		</div>
		<img class="projectPosterArrowRight next right" src="static/images/page/projects/projectPosterArrowRight.png"/>
</div>
<script type="text/javascript">
$(".projectPosterScroll").slide({
	titCell:"",
	mainCell:".projectPosters ul",
	autoPage:true,
	effect:"leftLoop",
	autoPlay:true,
	vis:4
});


</script>

<!-- PROJECTS BANNER SCROLL END  -->


<!--  INSTITUTION START  -->
<div class="institutionHeader font contentWidth center">
  <hr class="hr left" />
  <div class="fontColorGray institutionAreaTitle left">INSTITUTION</div>
  <hr class="hr right" />
  <div class="fontColorGray institutionAreaSubTitle">BEST INSTITUTIONS AROUND THE WORLD</div>
</div>
<div class="institutionPosterScroll contentWidth center font fontColorGray">
		<img class="institutionPosterArrowLeft prev left" src="static/images/page/projects/institutionArrowLeft.png"/>
		<div class="institutionPosters contentWidth">
			<ul id="institutionFistList">
				${institutionListWindow}
			</ul>
		</div>
		<img class="institutionPosterArrowRight next right" src="static/images/page/projects/institutionArrowRight.png"/>
	</div>
</div>
<script type="text/javascript">
$(".institutionPosterScroll").slide({
	titCell:"",
	mainCell:".institutionPosters ul",
	autoPage:true,
	effect:"leftLoop",
	autoPlay:true,
	vis:4
});
</script>
<!-- INSTITUTION END  -->


<!-- CULTURE EXCHANGE -->
<div class="cultureExchange contentWidth center font">
  <hr class="hr2 left" />
  <div class="fontColorGray cultureAreaTitle left">CULTURE EXCHANGE</div>
  <hr class="hr2 right" />
  <div class="cultureLargeImage left">                       <!-- 大图展示区 -->
     <img class="largeImageShow"/>  
     
     <div class="largeImageDate en_M">2015-1-30</div>
     <div class="largeImageTitle en_LL">铸造</div>
     <div class="largeImageSubTitle en_M">通过受人敬仰的雕塑精品探秘艺术工艺作坊内的繁华世界</div>
     <div class="largeImageInfo en_S">
       从耗时数年完成的各种大型雕塑，到由Barry Flanagan打造的兔子，法国摄影师Franck Sauvaire在今日短篇中记录了伦敦AB艺术铸造厂内呈献的复杂工艺。
     </div>
     <div class="largeImageMoreInfo en_M">阅读更多</div>
  </div>
  <div class="cultureThumbnail right">                       <!-- 焦点图右边缩略图 -->
    <div class="titleForThumbnail en_S">更多您的喜爱<span class="right"><img src="static/images/page/projects/slideUpdate.png" onClick="updateThumbnail()"/></span></div>
    <div class="thumbnail1">
      <img class="thumbnailImage1"/>
      <div class="thumbnailTitle">想给我们供稿？</div>
      <div class="thumbnailSubTitle">诚邀分享奇思妙想，提议原创故事</div>
    </div>
    <div class="thumbnail2">
      <img class="thumbnailImage2"/>
      <div class="thumbnailTitle">想给我们供稿？</div>
      <div class="thumbnailSubTitle">诚邀分享奇思妙想，提议原创故事</div>
    </div>
    <div class="thumbnail3">
      <img class="thumbnailImage3"/>
      <div class="thumbnailTitle">想给我们供稿？</div>
      <div class="thumbnailSubTitle">诚邀分享奇思妙想，提议原创故事</div>
    </div>
  </div>                                        
</div>
<script type="text/javascript" src="static/javascript/page/project.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
	  var largeImage=$(".largeImageShow");
	  var thumbnailImage1=$(".thumbnailImage1");
	  var thumbnailImage2=$(".thumbnailImage2");
	  var thumbnailImage3=$(".thumbnailImage3");
	  largeImage.attr("src","static/images/page/projects/cultureLargeImage.png");
	  thumbnailImage1.attr("src","static/images/page/projects/thumbnailImage.png");
	  thumbnailImage2.attr("src","static/images/page/projects/thumbnailImage2.png");
	  thumbnailImage3.attr("src","static/images/page/projects/thumbnailImage3.png");
	  
	  //添加焦点图的小图点击和大图显示对应函数
	  })
  function updateThumbnail(){
	  //更新焦点图内容
	  
	  }
</script>
<!-- CULTURE EXCHANGE -->

<!-- 页尾 -->
 <%@include file="/views/global/footer.jsp" %>

</body>
</html>
